<template>
  <!--  两部分内容-->
  <el-container>
    <el-main class="main">
      <!--      第一行是当前进行存储的数据表-->
      <el-row>
        <el-col :span="24">
          <div class="float-left">
            <el-text tag="b">当前进行存储的数据表：</el-text>
            <el-link>{{ currentTable }}</el-link>
          </div>
          <div class="float-right">
            <el-popconfirm title="将创建新的数据表用于存储数据是否继续?" @confirm="statusData.pop=true">
              <template #reference>
                <el-button class="margin-left-6" bg type="danger" size="small">创建数据表并迁移</el-button>
              </template>
            </el-popconfirm>
          </div>
        </el-col>
      </el-row>
      <!-- 内容区 -->
      <el-table :cell-class-name="handleCellClassName" :row-class-name="handleRowClassName" :data="table" row-key="id"
                v-loading="statusData.loading">
        <el-table-column prop="tableName" label="数据表名" width="auto" show-overflow-tooltip></el-table-column>
        <el-table-column prop="from" label="开始日期" width="auto" show-overflow-tooltip></el-table-column>
        <el-table-column prop="to" label="结束日期" width="auto" show-overflow-tooltip></el-table-column>
        <el-table-column prop="size" label="数据量" width="auto" show-overflow-tooltip></el-table-column>
      </el-table>
      <el-dialog v-model="statusData.pop" width="30%" title="创建数据表" center destroy-on-close>
        <el-form :model="addForm" ref="addFormInstance" :rules="addFormRule">
          <el-row>
            <el-col :span="14">
              <el-form-item label="数据表名:" required prop="tableName">
                <el-input v-model="addForm.tableName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-button class="float-right" @click="handleAddTable" type="primary">创建</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-dialog>
    </el-main>
  </el-container>
</template>
<script setup lang="ts">
import {onBeforeMount, ref} from "vue";
import {add, getCurrentTable, getRange, getTableCount, TableRange} from "@/api/table.ts";
import {FormInstance, FormRules} from "element-plus";
import {JobList} from "@/api/schedule.ts";


onBeforeMount(() => {
  init()
})

const table = ref<TableRange[]>()

const currentTable = ref<string>()

const statusData = ref({
  loading: true,
  pop: false
})

const addForm = ref({
  tableName: ""
})

const addFormRule: FormRules = {
  tableName: [
    {required: true, message: '请输入数据表名', trigger: 'blur'},
    {pattern: /^[a-zA-Z0-9_]{1,25}$/, message: '请输入1-25位大小写字母或数字或下划线', trigger: 'blur'}
  ]
}

const addFormInstance = ref<FormInstance>()

const init = () => {
  initCurrent()
}

const initTableRange = () => {
  getRange().then(res => {
    table.value = res.data.data
    statusData.value.loading = false
  }).then(initTableCount)
}

const initCurrent = () => {
  getCurrentTable().then(res => {
    currentTable.value = res.data.msg
  }).then(initTableRange)
}

const handleAddTable = () => {
  addFormInstance.value.validate(valid => {
    if (valid) {
      add(addForm.value.tableName).then(() => {
        statusData.value.pop = false
        initTableRange()
      })
    }
  })
}

const initTableCount = () => {
  for (let i = 0; i < table.value.length; i++) {
    getTableCount(table.value[i].tableName).then(res => {
      table.value[i].size = res.data.data
    })
  }
}

const handleRowClassName = ({row}: { row: TableRange }) => {
  if (row.tableName == currentTable.value) {
    return 'current-row'
  }
}

const handleCellClassName = (data: { row: any, column: any, rowIndex: number, columnIndex: number }) => {
  if (data.columnIndex == 3 && data.row.size > 1000000) {
    return "danger-cell"
  }
}
</script>
<style scoped>
.main {
  padding: 0;
}

.el-table .current-row {
  --el-table-tr-bg-color: var(--el-color-primary-light-9);
}

.margin-left-6 {
  margin-left: 6px;
}

</style>
<style>
.danger-cell {
  background-color: var(--el-color-danger-light-3)!important;
}
</style>